<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin-left: 2em;
      margin-right: 2em;
      font-family: sans-serif;
      text-align: center;
      background-color: #000;
      color: #fff;
    }

    textarea {
      background-color: #18191A;
      color: #fff;
      width: 100%;
      height: 100%;
      font-size: 12pt;
      box-sizing: border-box;
      border: 1px solid #141312;
      box-sizing: border-box;
      resize: none;
    }

    textarea:focus {
      outline: none;
    }

  </style>
</head>

<body>
  <!-- http://tholman.com/github-corners/ -->
  <a href="https://github.com/disjukr/activate-power-mode" class="github-corner"><svg width="80" height="80"
      viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;">
      <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
      <path
        d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
        fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
      <path
        d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
        fill="currentColor" class="octo-body"></path>
    </svg></a>
  <style>
    .github-corner:hover .octo-arm {
      animation: octocat-wave 560ms ease-in-out
    }

    @keyframes octocat-wave {

      0%,
      100% {
        transform: rotate(0)
      }

      20%,
      60% {
        transform: rotate(-25deg)
      }

      40%,
      80% {
        transform: rotate(10deg)
      }
    }

    @media (max-width:500px) {
      .github-corner:hover .octo-arm {
        animation: none
      }

      .github-corner .octo-arm {
        animation: octocat-wave 560ms ease-in-out
      }
    }

  </style>
  <h1>Activate Power Mode</h1>
  <p>You can also use this bookmarklet to activate power mode on any website you visit: <a href='javascript:(function()%7B!function(t%2Ce)%7B"object"%3D%3Dtypeof exports%26%26"object"%3D%3Dtypeof module%3Fmodule.exports%3De()%3A"function"%3D%3Dtypeof define%26%26define.amd%3Fdefine(%5B%5D%2Ce)%3A"object"%3D%3Dtypeof exports%3Fexports.POWERMODE%3De()%3At.POWERMODE%3De()%7D(this%2Cfunction()%7Breturn function(t)%7Bfunction e(n)%7Bif(o%5Bn%5D)return o%5Bn%5D.exports%3Bvar r%3Do%5Bn%5D%3D%7Bexports%3A%7B%7D%2Cid%3An%2Cloaded%3A!1%7D%3Breturn t%5Bn%5D.call(r.exports%2Cr%2Cr.exports%2Ce)%2Cr.loaded%3D!0%2Cr.exports%7Dvar o%3D%7B%7D%3Breturn e.m%3Dt%2Ce.c%3Do%2Ce.p%3D""%2Ce(0)%7D(%5Bfunction(t%2Ce%2Co)%7B"use strict"%3Bfunction n(t%2Ce)%7Breturn Math.random()*(e-t)%2Bt%7Dfunction r(t)%7Bif(a.colorful)%7Bvar e%3Dn(0%2C360)%3Breturn"hsla("%2Bn(e-10%2Ce%2B10)%2B"%2C 100%25%2C "%2Bn(50%2C80)%2B"%25%2C 1)"%7Dreturn window.getComputedStyle(t).color%7Dfunction i()%7Bvar t%2Ce%3Ddocument.activeElement%3Bif("TEXTAREA"%3D%3D%3De.tagName%7C%7C"INPUT"%3D%3D%3De.tagName%26%26"text"%3D%3D%3De.getAttribute("type"))%7Bvar n%3Do(1)(e%2Ce.selectionStart)%3Breturn t%3De.getBoundingClientRect()%2C%7Bx%3An.left%2Bt.left%2Cy%3An.top%2Bt.top%2Ccolor%3Ar(e)%7D%7Dvar i%3Dwindow.getSelection()%3Bif(i.rangeCount)%7Bvar d%3Di.getRangeAt(0)%2Ca%3Dd.startContainer%3Breturn a.nodeType%3D%3D%3Ddocument.TEXT_NODE%26%26(a%3Da.parentNode)%2Ct%3Dd.getBoundingClientRect()%2C%7Bx%3At.left%2Cy%3At.top%2Ccolor%3Ar(a)%7D%7Dreturn%7Bx%3A0%2Cy%3A0%2Ccolor%3A"transparent"%7D%7Dfunction d(t%2Ce%2Co)%7Breturn%7Bx%3At%2Cy%3Ae%2Calpha%3A1%2Ccolor%3Ao%2Cvelocity%3A%7Bx%3A-1%2B2*Math.random()%2Cy%3A-3.5%2B2*Math.random()%7D%7D%7Dfunction a()%7Bfor(var t%3Di()%2Ce%3D5%2BMath.round(10*Math.random())%3Be--%3B)p%5Bf%5D%3Dd(t.x%2Ct.y%2Ct.color)%2Cf%3D(f%2B1)%25500%3Bvar o%3D1%2B2*Math.random()%2Cn%3Do*(Math.random()>.5%3F-1%3A1)%2Cr%3Do*(Math.random()>.5%3F-1%3A1)%3Bdocument.body.style.marginLeft%3Dn%2B"px"%2Cdocument.body.style.marginTop%3Dr%2B"px"%2CsetTimeout(function()%7Bdocument.body.style.marginLeft%3D""%2Cdocument.body.style.marginTop%3D""%7D%2C75)%7Dfunction l()%7BrequestAnimationFrame(l)%2Cu.clearRect(0%2C0%2Cc.width%2Cc.height)%3Bfor(var t%3D0%3Bt<p.length%3B%2B%2Bt)%7Bvar e%3Dp%5Bt%5D%3Be.alpha<%3D.1%7C%7C(e.velocity.y%2B%3D.075%2Ce.x%2B%3De.velocity.x%2Ce.y%2B%3De.velocity.y%2Ce.alpha*%3D.96%2Cu.globalAlpha%3De.alpha%2Cu.fillStyle%3De.color%2Cu.fillRect(Math.round(e.x-1.5)%2CMath.round(e.y-1.5)%2C3%2C3))%7D%7Dvar c%3Ddocument.createElement("canvas")%3Bc.width%3Dwindow.innerWidth%2Cc.height%3Dwindow.innerHeight%2Cc.style.cssText%3D"position%3Afixed%3Btop%3A0%3Bleft%3A0%3Bpointer-events%3Anone%3Bz-index%3A999999"%2Cwindow.addEventListener("resize"%2Cfunction()%7Bc.width%3Dwindow.innerWidth%2Cc.height%3Dwindow.innerHeight%7D)%2Cdocument.body.appendChild(c)%3Bvar u%3Dc.getContext("2d")%2Cp%3D%5B%5D%2Cf%3D0%3Ba.colorful%3D!1%2CrequestAnimationFrame(l)%2Ct.exports%3Da%7D%2Cfunction(t%2Ce)%7B!function()%7Bfunction e(t%2Ce%2Cr)%7Bvar i%3Dr%26%26r.debug%7C%7C!1%3Bif(i)%7Bvar d%3Ddocument.querySelector("%23input-textarea-caret-position-mirror-div")%3Bd%26%26d.parentNode.removeChild(d)%7Dvar a%3Ddocument.createElement("div")%3Ba.id%3D"input-textarea-caret-position-mirror-div"%2Cdocument.body.appendChild(a)%3Bvar l%3Da.style%2Cc%3Dwindow.getComputedStyle%3FgetComputedStyle(t)%3At.currentStyle%3Bl.whiteSpace%3D"pre-wrap"%2C"INPUT"!%3D%3Dt.nodeName%26%26(l.wordWrap%3D"break-word")%2Cl.position%3D"absolute"%2Ci%7C%7C(l.visibility%3D"hidden")%2Co.forEach(function(t)%7Bl%5Bt%5D%3Dc%5Bt%5D%7D)%2Cn%3Ft.scrollHeight>parseInt(c.height)%26%26(l.overflowY%3D"scroll")%3Al.overflow%3D"hidden"%2Ca.textContent%3Dt.value.substring(0%2Ce)%2C"INPUT"%3D%3D%3Dt.nodeName%26%26(a.textContent%3Da.textContent.replace(%2F%5Cs%2Fg%2C" "))%3Bvar u%3Ddocument.createElement("span")%3Bu.textContent%3Dt.value.substring(e)%7C%7C"."%2Ca.appendChild(u)%3Bvar p%3D%7Btop%3Au.offsetTop%2BparseInt(c.borderTopWidth)%2Cleft%3Au.offsetLeft%2BparseInt(c.borderLeftWidth)%7D%3Breturn i%3Fu.style.backgroundColor%3D"%23aaa"%3Adocument.body.removeChild(a)%2Cp%7Dvar o%3D%5B"direction"%2C"boxSizing"%2C"width"%2C"height"%2C"overflowX"%2C"overflowY"%2C"borderTopWidth"%2C"borderRightWidth"%2C"borderBottomWidth"%2C"borderLeftWidth"%2C"borderStyle"%2C"paddingTop"%2C"paddingRight"%2C"paddingBottom"%2C"paddingLeft"%2C"fontStyle"%2C"fontVariant"%2C"fontWeight"%2C"fontStretch"%2C"fontSize"%2C"fontSizeAdjust"%2C"lineHeight"%2C"fontFamily"%2C"textAlign"%2C"textTransform"%2C"textIndent"%2C"textDecoration"%2C"letterSpacing"%2C"wordSpacing"%2C"tabSize"%2C"MozTabSize"%5D%2Cn%3Dnull!%3Dwindow.mozInnerScreenX%3B"undefined"!%3Dtypeof t%26%26"undefined"!%3Dtypeof t.exports%3Ft.exports%3De%3Awindow.getCaretCoordinates%3De%7D()%7D%5D)%7D)%2Cfunction()%7BPOWERMODE.colorful%3D!0%2Cdocument.body.addEventListener("input"%2CPOWERMODE)%7D()%7D)()'>Activate Power Mode!</a></p>
    <textarea rows="40" cols="80">type here!</textarea>
    <script src="../activate-power-mode.js"></script>
    <script>
		POWERMODE.colorful = true;  // make power mode colorful
		POWERMODE.shake = false; // turn off shake
		document.body.addEventListener('input', POWERMODE);
    </script>
</body>
</html>
